<template>
  <div class="home-root">
    <!--测试一个实际使用的场景-->
    <debby-form
      ref="debbyForm"
      v-model="dataForm"
      label-width="100px"
      label-position="top"
      :schema="formSchema"
      @onFieldChange="onFieldChange"
    />
  </div>
</template>
<script type="text/jsx">
import DebbyForm from '@/components/debby-form/index'
export default {
  name: 'FormByRender',
  components: { DebbyForm },
  data() {
    return {
      dataForm: {},
      formSchema: {
        type: 'object',
        'ui:labelWidth': 0,
        properties: {
          name: {
            'ui:label': '步骤名称',
            default: '步骤名称1'
          },
          filename: {
            ui: {
              column: 24,
              label: '文件名称'
            }
          },
          test: {
            'ui:label': '自定义render',
            default: {
              sex: -1,
              name: ''
            },
            ui: {
              column: 24,
              labelWidth: '100px',
              render: (h, context) => {
                const props = context.props || {}
                const listeners = context.listeners || {}
                return (
                  <el-card>
                    <el-form-item>
                      <el-radio-group value={props.value.sex} label='男' vOn:input={value => listeners.input({
                        ...props.value,
                        sex: value
                      })}>
                        <el-radio label={0}>男</el-radio>
                        <el-radio label={1}>女</el-radio>
                        <el-radio label={-1}>其他</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <p style='margin: 12px 0'>
                      <el-button type='danger' vOn:click={() => listeners.input({
                        ...props.value,
                        name: '我被点击button改变了'
                      })}>是jsx里面的button(点我改变下面的值)</el-button>
                    </p>
                    <p>
                      <el-form-item prop={props.idxChain + '.name'} id={props.idxChain + '.name'} rules={[{ required: true, message: '请输入值(步骤名称)' + props.formData.name, trigger: 'blur' }]}>
                        <el-input value={props.value.name} placeholder='点击上面的button我就改变啦！' vOn:input={value => listeners.input({
                          ...props.value,
                          name: value
                        })} />
                      </el-form-item>
                    </p>
                  </el-card>
                )
              }
            }
          }
        }
      }
    }
  },
  methods: {
    // 某个字段的值发生改变
    onFieldChange(idxChain, value, schema) {
      console.log(idxChain, value, schema)
    }
  }
}
</script>

<style>
    * {
        box-sizing: border-box;
    }
</style>
